<style>
  .table-gray-title {
    line-height: 30px;
    padding: 0 15px;
    background: rgba(240, 240, 240, 1);
    border-radius: 2px;
    display: inline-block;
    margin-left: 12px;
    margin-top: 10px;
  }

  .color-delete {
    text-decoration: line-through;
    color: #ea723d;
  }
</style>

<main id="changeContent">
  <div class="text-right mb-10">
    <a @click="cutChangeFlow">{{!cutChangeFlowFlag ? '只显示变更信息' : '显示全部' }}</ a>
  </div>
  <div class="border br-4 mb-10">
    <div class="dy-flex bg-fff text-center line-height-40 color-gray">
      <div class="dy-fx-1 border-r">变更项</div>
      <div class="dy-fx-3 border-r">变更前</div>
      <div class="dy-fx-3">变更后</div>
    </div>
    <div class="dy-flex bg-fff border-t" v-for="item in groupLogs" v-if="publicGroup.indexOf(item.group) > -1">
      <div class="dy-fx-1 border-r dy-flex color-666" style="justify-content: center;align-items: center;">
        {{ item.operationName }}</div>
      <!-- start -->
      <div class="dy-fx-6">
        <div class="dy-flex" v-for="log in item.logRecords">
          <div class="dy-fx-1 border-r">
            <div v-for="row in log.rowData">
              <div class="table-gray-title  color-666" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
                {{ row.content }}</div>
							<div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10 ">--</div>
              <div class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
                v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
                {{ row.before ? row.before : row.content || '--'}}</div>
            </div>
          </div>
          <div class="dy-fx-1">
            <div v-for="row in log.rowData">
              <div class="table-gray-title color-666" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
                {{ row.content }}</div>
              <div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10 color-orange">
                {{ row.key ? row.key + ':' : '' }}
                {{ row.before ? row.before : row.content }}</div>
              <div :class="{'color-orange': row.logType == 'change', 'color-delete': row.logType == 'delete'}"
                class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
                v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
                {{ row.after ? row.after : row.content || '--' }}</div>
            </div>
          </div>
        </div>

      </div>
      <!-- end -->
    </div>
  </div>
  <hl-button type="primary" @on-click="next" v-if="window.changePage.steps.join(',').indexOf('1') != -1">下一步</hl-button>
  <hl-button type="outline" @on-click="previous">上一步</hl-button>
  <hl-button type="primary" @on-click="save" v-if="window.changePage.steps.join(',').indexOf('1') == -1">保存</hl-button>
  <hl-button type="outline" @on-click="submit" v-if="window.changePage.steps.join(',').indexOf('1') == -1">提交审批</hl-button>

</main>
<script src="modules/contratchange/scripts/change_content.js" charset="utf-8"></script>
